import { View, Text } from '@tarojs/components'
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import FoodCard from '../../components/FoodCard'
import './index.scss'

const History = () => {
  const recentViews = useSelector(state => state.food.recentViews)

  return (
    <View className='history'>
      <View className='history__header'>
        <Text className='history__title'>浏览历史</Text>
        <Text className='history__count'>{recentViews.length}条记录</Text>
      </View>

      {recentViews.length > 0 ? (
        <View className='history__list'>
          {recentViews.map(food => (
            <View key={food.id} className='history__item'>
              <Text className='history__date'>{food.viewTime || '今天'}</Text>
              <FoodCard food={food} />
            </View>
          ))}
        </View>
      ) : (
        <View className='history__empty'>
          <Text className='fa-solid fa-clock-rotate-left history__empty-icon' />
          <Text className='history__empty-text'>暂无浏览记录</Text>
          <Text className='history__empty-tip'>去发现好吃的吧</Text>
        </View>
      )}
    </View>
  )
}

export default History 